import { h, render, defineComponent,ref } from "vue";
import PopoverContainer from "./PopoverContainer.vue"; // 父节点容器

/**
 * @param {*} title 标题
 * @param {*} content 内容
 * @param {*} cancelText 取消文本
 * @param {*} confirmText 确认文本
 */
export default class Vue3Container {
  constructor({
    parentDomId,
    positionLeft,
    slotId,
    positionTop,
    slotComponent,
  }) {
    this.parentDom = document.getElementById(parentDomId); // 当前需要挂载的domid
    this.slotId = slotId; // 当前插入的元素
    this.init(positionLeft, positionTop, slotComponent);
    this.dom = document.getElementById(this.slotId); // 当前插入的元素
    this.hide(); // 隐藏元素
    this.status = false; // 当前打开状态

  }
  // 初始化
  init(positionLeft, positionTop, slotComponent) {
    this.pickData = ref(null) // 需要传入子组件的数据
    // 生成vnode 节点
    const parentNode = h(
      PopoverContainer, // 父节点容器
      {
        left: positionLeft,
        top: positionTop,
        id: this.slotId,
      }
    );
     this.slotNode = h(slotComponent,{
      pickData: this.pickData 
    });
    // 渲染到父节点上, 插槽插入到 父节点    构成层级关系  需要挂载的dom > 布局dom > 插槽dom
    render(parentNode, this.parentDom);
    setTimeout(() => {
      render( this.slotNode, this.dom);
    });
  }
  // 显示
  show = (callback) => {
    this.status = true;
    this.dom.style.visibility = "visible";
    callback && callback();
  };
  // 隐藏
  hide = (callback) => {
    this.status = false;
    this.dom.style.visibility = "hidden";
    callback && callback();
  };
  // 改变传入插槽的数据
  changePickData(data){
    this.pickData.value = data
  }
}
